<template>
	<div class="yp_myOrderform">
		<div class="yp_myOrderform_top">
			<h3>最近浏览</h3>
		</div>
		<div class="yp_myInterinfo">
	
		<div class="yp_through">
			<img src="../assets/thing1.jpg" class="yp_through_img"/>
			<h4>艾维诺婴幼儿面霜 Aveeno Ba</h4>
			<div class="yp_price">
				<span style="color: orange">¥125</span><span style="color: gray;text-decoration: line-through;margin-left: 10px;">¥0</span>
			<img src="../assets/gwc.png" />
			</div>
		</div>
		
		
		<div class="yp_through">
			<img src="../assets/thing1.jpg" class="yp_through_img"/>
			<h4>艾维诺婴幼儿面霜 Aveeno Ba</h4>
			<div class="yp_price">
				<span style="color: orange">¥125</span><span style="color: gray;text-decoration: line-through;margin-left: 10px;">¥0</span>
			<img src="../assets/gwc.png" />
			</div>
		</div>
		</div>
	</div>
</template>

<script>
	export default {
			  name: 'glanceOver',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		}
		
	}
</script>

<style scoped>
	.yp_myOrderform{
		float: right;
		width: 1085px;
		border: 1px solid gainsboro;
	}
	.yp_myOrderform_top{
		height: 61px;
		line-height: 61px;
		padding-left: 20px;
		border-bottom: 1px solid gainsboro;
	}
	.yp_through{
		width: 305px;
		float: left;
		text-align: center;
		border: 1px solid #D3D3D3;
		margin: 20px;
	}
	.yp_through:hover{
		cursor: pointer;
		border: 1px solid #4B943D;
	}
	.yp_through_img{
		width: 303px;
		height: 305px;
	}
	.yp_price{
		text-align: left;
		width: 220px;
		margin: 20px auto 20px;
		margin-top: 20px;
		position: relative;
	}
	.yp_price img{
		position: absolute;
		right: 10px;
		bottom: 0;
	}
</style>